<template>
  <div class="team">
    <top-head title="我的团队" left="1"></top-head>
    <div class="content">
      <!-- loadList 向子组件传递事件 -->
      <Matryoshka :loadList="getTeamList">
        <template #default="child">
          <div class="teamItem" @click="child.changeOpen(!child.isOpen)">
            <img :src="child.nodeItem ? child.nodeItem.avatar : ''" alt="" />
            <div>
              <p>{{ child.nodeItem ? child.nodeItem.team_level : "" }}</p>
              <p>{{ child.nodeItem ? child.nodeItem.account : "" }}</p>
            </div>
          </div>
        </template>
      </Matryoshka>
    </div>
  </div>
</template>

<script>
import { request } from "@/api/index.js";
import topHead from "@/components/topHead.vue";
import Matryoshka from "@/components/Matryoshka.vue";
export default {
  name: "team",
  components: {
    "top-head": topHead,
    Matryoshka: Matryoshka,
  },
  data() {
    return {
      teamList: [],
    };
  },
  methods: {
    // id childFun 子组件返回的参数
    getTeamList(id, childFun) {
      request({
        module: "User",
        interface: "4102",
        data: {
          nodeId: id,
        },
      }).then((res) => {
        console.log(res, "推荐团队信息");
        this.teamList = res.data.nodeList;
        // 向子组件传递渲染的数组
        childFun(this.teamList);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.team {
  width: 100%;
  min-height: 100vh;
  .content {
    width: 92%;
    margin: 14px auto 0;
    background: #1E1034;
    border-radius: 8px;
    padding: 0 15px;
    box-sizing: border-box;
    .teamItem {
      width: 345px;
      height: 80px;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
      }
      p {
        margin-left: 15px;
        color: #fff;
        font-size: 14px;
      }
    }
  }
}
</style>
